<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>welcome to youngPeng</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet" media="all">
<link href="css/animate.min.css" rel="stylesheet" media="all">
<!-- Bootstrap bootstrap-touch-slider Slider Main Style Sheet -->
<link href="css/bootstrap-touch-slider.css" rel="stylesheet" media="all">

<style>

audio{
    z-index: 5;
    position: absolute;
    bottom: 0;
    opacity: 0.1;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
}
audio:hover{
    opacity: 1;
}

</style>
</head>
<body>
<script src="/demos/googlegg.js"></script>

 <!--音乐-->
<audio controls autoplay>
    <source src="yinyue.mp3">
</audio>

	<div id="bootstrap-touch-slider" class="carousel bs-slider fade  control-round indicators-line" data-ride="carousel" data-pause="hover" data-interval="5000" >

			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li data-target="#bootstrap-touch-slider" data-slide-to="0" class="active"></li>
				<li data-target="#bootstrap-touch-slider" data-slide-to="1"></li>
				<li data-target="#bootstrap-touch-slider" data-slide-to="2"></li>
			</ol>

			<!-- Wrapper For Slides -->
			<div class="carousel-inner" role="listbox">

				<!-- Third Slide -->
				<div class="item active">

					<!-- Slide Background -->
					<img src="images/slide1.jpeg" alt="Bootstrap Touch Slider"  class="slide-image"/>
					<div class="bs-slider-overlay"></div>

					<div class="container">
						<div class="row">
							<!-- Slide Text Layer -->
							<div class="slide-text slide_style_left">
								<h1 data-animation="animated zoomInRight">您好，欢迎来到我的网络空间</h1>
								<p data-animation="animated fadeInLeft"><b>我是youngPeng,不瞒你说，难对我，不存在！一起享受技术盛宴</b></p>
								<a href="https://blog.csdn.net/m0_37156901" target="_blank" class="btn btn-default" data-animation="animated fadeInLeft">
									【Java底层】CSDN博客</a>
								<a href="https://github.com/HeiBoWang" target="_blank"  class="btn btn-primary" data-animation="animated fadeInRight">
									查看我的gitHub</a>
							</div>
						</div>
					</div>
				</div>
				<!-- End of Slide -->

				<!-- Second Slide -->
				<div class="item">

					<!-- Slide Background -->
					<img src="images/slide2.jpeg" alt="Bootstrap Touch Slider"  class="slide-image"/>
					<div class="bs-slider-overlay"></div>
					<!-- Slide Text Layer -->
					<div class="slide-text slide_style_center">
						<h1 data-animation="animated flipInX">人总要有梦想，万一实现了呢？</h1>
						<p data-animation="animated lightSpeedIn">Hello! Are You OK? 在风口浪尖，猪也会飞</p>
						<a href="http://i.youku.com/wyp666" target="_blank" class="btn btn-default" data-animation="animated fadeInUp">
						【AE | PS】优酷主页
						</a>
						<a href="http://youngpengw.gitee.io/webdesign/" target="_blank"  class="btn btn-primary" data-animation="animated fadeInDown">
							【WEB前端 VUE】</a>
					</div>
				</div>
				<!-- End of Slide -->

				<!-- Third Slide -->
				<div class="item">

					<!-- Slide Background -->
					<img src="images/slide3.jpeg" alt="Bootstrap Touch Slider"  class="slide-image"/>
					<div class="bs-slider-overlay"></div>
					<!-- Slide Text Layer -->
					<div class="slide-text slide_style_right">
						<h1 data-animation="animated zoomInLeft">越努力，越幸运，年轻就奋斗</h1>
						<p data-animation="animated fadeInRight">既然你的野心很大，那就要实力来满足，让它绽放光芒.</p>
						<a href="#" target="_blank" class="btn btn-default" data-animation="animated fadeInLeft">
							【机器学习】</a>
						<a href="#" target="_blank" class="btn btn-primary" data-animation="animated fadeInRight">
							【得！干就完了】</a>
					</div>
				</div>
				<!-- End of Slide -->


			</div><!-- End of Wrapper For Slides -->

			<!-- Left Control -->
			<a class="left carousel-control" href="#bootstrap-touch-slider" role="button" data-slide="prev">
				<span class="fa fa-angle-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>

			<!-- Right Control -->
			<a class="right carousel-control" href="#bootstrap-touch-slider" role="button" data-slide="next">
				<span class="fa fa-angle-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>

		</div> <!-- End  bootstrap-touch-slider Slider -->
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap-grid.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
<script src="js/bootstrap-touch-slider.js"></script>
<script type="text/javascript">
	$('#bootstrap-touch-slider').bsTouchSlider();
</script>

<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>下滑了解更多</p>
<p>广度决定深度<br>技术改变世界<br>
<a href="https://gitee.com/youngPengw"></a></p>
</div>
</body>
</html>